<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>居中</title>
    <style>
        body {
            /* 整个外部容器设置为弹性盒，内部元素可以弹性布局 */
            display: flex;
            min-height: 100vh;
            margin: 0;
            background-color: rgb(239, 251, 215);
        }

        main {
            /* 开启弹性盒 */
            display: flex;
            /* 自身内部元素（文本）在辅轴上居中排布 */
            align-items: center;
            /* 自身内部元素（文本）在主轴上居中排布 */
            justify-content: center;
            /* 外边距auto，两个方向都是，这样main才会在body居中 */
            margin: auto;
            width: 18em;
            height: 10em;
            background-color: rgb(246, 215, 170);
        }
    </style>
</head>

<body>
    <!-- 在CSS中实现水平居中
    1. 行内元素则对其父元素使用text-align: center;
    2. 块元素则设置其宽度，然后对其本身使用margin: auto;
    
        在CSS中实现垂直居中
    1. 绝对定位法。top: 50%; left: 50%; transform: translate(-50%, -50%);
    2. 视口中居中。margin: 50vh auto 0; transform: translateY(-50%);
    3. flexbox。见示例。
    4. 文本的话可以将height和line-height设置为一样的
     -->

    <main>Center me, please!</main>

    <!--
        flex-direction 指定容器中弹性元素的排列方式：
        可选值：
            row 默认值，弹性元素在容器中水平排列（左到右）
            row-reverse 水平反向排列（ 右到左）
            column 纵向排列（上到下）
            column-reverse 纵向反向排列（下到上）
        
        主轴：弹性元素排列的方向
        侧轴：与主轴垂直的方向

        弹性元素的属性：
            flex-grow：指定弹性元素的延展系数
            当父元素有多于空间时，子元素如何伸展
            flex-shrink：指定弹性元素的收缩系数
            当父元素中的空间不足时对子元素进行收缩
        
        flex-wrap 设置弹性元素是否在弹性容器中自动换行
            可选值：
                normal 默认值，元素不会自动换行
                wrap 元素沿着辅轴方向自动换行
                wrap-reverse 元素沿着辅轴反方向换行
        
        flex-flow：wrap和direction的简写
        flex-flow:row wrap;

        justify-content
            如何分配主轴上的空白空间（主轴上的元素如何排列）
            可选值：
                flex-start 元素沿着主轴起边排序
                flex-end 元素沿着主轴终边排序
                center 元素居中排序
                space-around 空白分布到元素两侧
                space-between 空白均匀分布到元素间
                space-evenly 空白分布到原色的单侧

        align-items
            元素在辅轴上如何对齐、元素间的关系
            可选值：
                stretch 默认值，将元素的长度设置为相同的值
                flex-start 元素不会拉伸，沿着辅轴起边对齐
                flex-end 元素不会拉伸，沿着辅轴终边对齐
                center 居中对齐
                baseline 基线对齐
        
        align-self
            用来覆盖当前弹性元素上的align-items

        flex-basis 
            指定元素在主轴上的基础长度
            如果主轴是横向的，则指定的是元素的宽度
            如果主轴是纵向的，则指定的是元素的高度
            默认值是auto，表示参考元素自身的高度或宽度
            如果传递了一个具体的数值，则以该数值为准

        flex 可以直接设置弹性元素所有的三个样式
            flex 增长 缩减 基础
                initial "flex: 0 1 auto"
                auto "flex: 1 1 auto"
                none "flex: 0 0 auto" 弹性元素没有弹性

        order:1;
            可以指定弹性元素的排列顺序

    -->

</body>

</html>